<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		lists
	} from '../../data/mock/reason'
	import {
		orderStore,
		orderMsg
	} from '@/stores'

	const store = orderStore()
	const msgStore = orderMsg()

	const id = ref(null)
	const index = ref(null)
	const selectId = ref(0)
	const selectText = ref('')
	const list = ref(lists)

	const currentOrder = computed(() => msgStore.currentOrder)

	//选中的id
	const isChecked = (id) => {
		return selectId.value === id
	}
	//监听radio-group
	const getReason = (e) => {
		const selectedId = e.detail.value
		selectId.value = selectId.value === selectedId ? null : selectedId
		const selectedItem = list.value.find(item => item.id == selectedId)
		if (selectedItem) {
			selectText.value = selectedItem.text
		}
	}
	//确认取消按钮
	const confirmCancle = () => {
		if (selectText.value) {
			store.updateOrderReason(index.value, selectText.value)
			store.updateOrderStatus(index.value, '已取消')
			uni.switchTab({
				url: '/pages/journey/journey'
			})
		} else {
			uni.showToast({
				title: '请选择原因',
				icon: 'none'
			})
		}
	}
	//返回上一页
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	onLoad((options) => {
		id.value = options.id
		index.value = options.index
	})
</script>

<template>
	<uni-nav-bar dark :fixed="true" background-color="#03bf5f" status-bar left-icon="left" title="取消订单"
		@clickLeft="back" />
	<view class="box">
		<view class="cancelOrder">
			<text class="question">确认取消吗?</text>
			<text class="hint">本次取消您无须承担责任</text>
			<view class="tips">
				<view class="tip">
					<image src="/static/images/my.png"></image>
					<view class="content">
						<text class="matter_1">乘客需知</text>
						<text class="matter_2">查看平台规则</text>
					</view>
				</view>
				<view class="tip">
					<image src="/static/images/my.png"></image>
					<view class="content">
						<text class="matter_1">联系客服</text>
						<text class="matter_2">协助解决订单问题</text>
					</view>
				</view>
			</view>
			<view class="reason">
				<text class="choose">请选择取消原因</text>
				<radio-group @change="getReason">
					<view class="select" v-for="item in list" :key="item.id">
						<text>{{item.text}}</text>
						<radio :value="item.id" :checked="isChecked(item.id)" class="radio" />
					</view>
				</radio-group>
			</view>
			<view class="buttons">
				<button class="confirm" @click="confirmCancle">确认取消</button>
				<button class="cancel" @click="back">暂不取消</button>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	@import '../../styles/_rpx.scss';

	.reason {
		display: flex;
		flex-direction: column;
		gap: rpx(15);
		margin: rpx(15) 0 rpx(12) 0;
		border-radius: rpx(10);
		background-color: #f0f0f0;

		.choose {
			font-weight: bold;
			margin: rpx(15) 0 0 rpx(15);
		}

		.select {
			display: flex;
			margin: 0 0 rpx(15) rpx(15);
			justify-content: space-between;

			text {
				font-size: rpx(14);
				margin: auto 0;
			}

			radio {
				display: flex;
				transform: scale(0.7);
				margin-right: rpx(15);
			}
		}
	}

	.box {
		background-color: #ffffff;
	}

	.cancelOrder {
		display: flex;
		flex-direction: column;
		width: rpx(346);
		margin: auto;
		background-color: #ffffff;

		.question {
			font-weight: bold;
			margin-top: rpx(15);
		}

		.hint {
			font-size: rpx(11);
			margin: rpx(13) 0 rpx(18) 0;
		}

		.tips {
			display: flex;
			gap: rpx(13);

			.tip {
				display: flex;
				width: rpx(162);
				height: rpx(49);
				border: rpx(2) solid #efefef;
				border-radius: rpx(5);
				background-color: #ffffff;

				.content {
					display: flex;
					flex-direction: column;
					gap: rpx(9);
					margin: auto 0;

					.matter_1 {
						font-size: rpx(11);
						font-weight: bold;
					}

					.matter_2 {
						font-size: rpx(9);
					}
				}

				image {
					width: rpx(40);
					height: rpx(33);
					margin: auto rpx(4) auto rpx(9);
				}
			}
		}

		.buttons {
			display: flex;
			gap: rpx(27);
			margin: 0 auto;

			button {
				width: rpx(156);
				height: rpx(36);
				line-height: rpx(36);
				font-size: rpx(14);
			}

			.confirm {
				background-color: #e3efeb;
			}

			.cancel {
				background-color: #52c582;
			}
		}
	}
</style>